The perfect layout for a three column blog
I have always wanted the perfect three column design for my blog. I stumbled across this web site and I think this is the probably as good as it gets.
Holy Grail 3 column liquid-layout: No Quirks Mode, No IE Conditional Comments
This is by Matthew James Taylor and I have to say I am very impressed.
I renamed the CSS id’s to something easier for me to remember. I added a navigation bar, and another div to give a white space on the right and left.
Here is the basic html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-GB">
<head>
<title>Site Title</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
body {
margin:0;
padding:0;
}
#ContainerMain {}
a {
/* color:#369; */
text-decoration:none;
}
a:hover {
text-decoration: underline;
}
h1, h2, h3 {
margin:.8em 0 .2em 0;
padding:0;
}
p {
margin:.4em 0 .8em 0;
padding:0;
}
img {
margin:10px 0 5px;
}
#Header {
float:left;
width:100%;
padding:0;
margin:0;
border-bottom:1px solid #000;
background: #CCC;
color: #FFF;
}
#Header p {
padding:.5em 15px .2em 15px;
margin:0;
}
#Header h1 {
padding:.2em 15px;
margin:0;
}
#Header h2 {
padding:.2em 15px .7em 15px;
margin:0;
}
#NavBar {
float:left;
width:100%;
padding:0;
margin:0;
border-bottom:1px solid #000;
background: #EEE;
color: #FFF;
}
#ContainerColumns {
margin-left: 20px;
margin-right: 20px;
}
#ContainerLeft {
position:relative; /* This fixes the IE7 overflow hidden bug and stops the layout jumping out of place */
clear:both;
float:left;
width:100%; /* width of whole page */
overflow:hidden; /* This chops off any overhanging divs */
background:#ffd8b7; /* Left column background colour */
}
#ContainerMiddle {
float:left;
width:200%;
position:relative;
left:200px;
background:#EEE; /* Centre column background colour */
}
#ContainerRight {
float:left;
width:100%;
position:relative;
left:50%;
margin-left:-400px;
background:#ff9; /* Right column background colour */
}
#ColumnMiddlewrap {
float:right;
width:50%;
position:relative;
right:100%;
}
#ColumnMiddlepad {
margin:0 15px 0 415px;
overflow:hidden;
}
#ColumnMiddle {
width:100%;
overflow:hidden;
}
#ColumnLeft {
float:left;
width:170px;
position:relative;
margin-left:-50%;
left:215px;
overflow:hidden;
}
#ColumnRight {
float:left;
width:170px;
position:relative;
left:15px;
overflow:hidden;
}
#footer {
text-align: center;
clear:both;
float:left;
width:100%;
padding:0;
margin:0;
border-top:1px solid #000;
background: #CCC;
}
#footer p {
margin: 0px;
padding: 0px;
font-size: 12px;
}
</style>
</head>
<body>
<div id="ContainerMain">
<div id="Header">
<h1>Site Name</h1>
<h2>Site Tag Line</h2>
</div>
<div id="NavBar">Home</div>
<div id="ContainerColumns">
<div id="ContainerLeft">
<div id="ContainerMiddle">
<div id="ContainerRight">
<div id="ColumnMiddlewrap">
<div id="ColumnMiddlepad">
<div id="ColumnMiddle">
<!-- Column 1 start -->
<p>Middle Column</p>
<p><a href="www.rhyous.com">http://www.Rhyous.com</a></p>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<!-- Column 1 end -->
</div>
</div>
</div>
<div id="ColumnLeft">
<!-- Column 2 start -->
<p>Left Column</p>
<!-- Column 2 end -->
</div>
<div id="ColumnRight">
<!-- Column 3 start -->
<p>Right Column</p>
<!-- Column 3 end -->
</div>
</div>
</div>
</div>
</div>
<div id="footer">
<p>Footer</p>
<p>This is where you put your footer stuff.</p>
<p>
<a href="http://validator.w3.org/check?uri=referer">
<img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Strict" height="31" width="88" />
</a>
</p>
</div>
</div>
</body>
</html>
[...] Similar Posts The perfect layout for a three column blog [...]